<script setup lang="ts">
  import { HMessage, HMessageBox } from '@/components/common/message'
  import { useCheckCode } from '@/services/pages/order/useOrder'
  import { ref } from 'vue'
  import { getOrderGoodsDetail } from '@/api/order'
  import { GoodInfo } from '@/views/order/detail/components/commodity/types'
  import handleClipboard from '@/utils/clipboard' //复制

  const { checkForm, checkLoading, check, resetForm } = useCheckCode()

  defineOptions({
    name: 'OrderWaitHandleEventBtn',
  })

  const props = defineProps({
    orderId: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 审核条码弹窗显示状态
  const checkCodeModalVisible = ref(false)

  // 获取商品列表加载
  const getGoodListLoading = ref(false)

  // 获取商品列表请求参数
  const getGoodListParam = ref({
    limit: 50,
    page: 1,
  })

  // 商品列表
  const goodList = ref<Array<GoodInfo>>([])

  /**
   * 获取商品列表
   */
  const getGooList = async () => {
    getGoodListLoading.value = true
    const res = await getOrderGoodsDetail(props.orderId, getGoodListParam.value)
    getGoodListLoading.value = false
    if (res.data.code === 20000) {
      goodList.value = res.data.data.rows
      return
    }
    HMessageBox.error(res.data.message)
  }

  /**
   * 审核条码点击事件
   */
  const onCheckCodeClick = () => {
    checkCodeModalVisible.value = true
    getGooList()
  }

  /**
   * 隐藏弹窗
   */
  const hideDialog = () => {
    checkCodeModalVisible.value = false
    resetForm()
  }

  /**
   * 通过点击事件
   */
  const onAgree = async () => {
    checkForm.value.checkResult = true
    const res = await check(props.orderId)
    if (res.code === 20000) {
      HMessage.success('审核成功')
      hideDialog()
      emits('update')
      return
    }
    HMessageBox.error(res.message)
  }

  /**
   * 驳回点击事件
   */
  const onUnAgree = async () => {
    checkForm.value.checkResult = false
    const res = await check(props.orderId)
    if (res.code === 20000) {
      HMessage.success('审核成功')
      hideDialog()
      emits('update')
      return
    }
    HMessageBox.error(res.message)
  }
</script>

<template>
  <h-plain-button @click="onCheckCodeClick">审核条码</h-plain-button>

  <h-dialog
    v-model="checkCodeModalVisible"
    title="审核条码"
    :loading="checkLoading"
    @close="hideDialog"
  >
    <div class="good-list">
      <el-table :border="true" :data="goodList" resizable stripe style="width: 100%">
        <!-- 序号 -->
        <el-table-column label="序号" width="50" fixed="left" :align="'center'" type="index" />

        <!-- 条码 -->
        <el-table-column prop="codes" label="条码" width="180">
          <template #default="i">
            <span v-if="i.row.codes.length > 0" style="display: flex; align-items: center">
              <ShowTooltip
                style="width: 110px"
                placement="top"
                ref-name="testName"
                class-name="is_textClass"
                :content="i.row.codes.join(',') || ''"
                :is-text="true"
                color="#606266"
                :size="12"
                :offset="8"
                :show-after="200"
              ></ShowTooltip>
              <HLink
                :data-clipboard-text="i.row.codes.join(',')"
                @click="handleClipboard(i.row.codes.join(','), $event)"
                >复制</HLink
              >
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="pro" show-overflow-tooltip label="产品信息">
              <template #default="scope">
                {{ scope.row.goodsCode }}&nbsp;{{ scope.row.goodsBrand }}&nbsp;{{
                  scope.row.goodsName
                }}&nbsp;{{ scope.row.goodsModel }}&nbsp;{{ scope.row.goodsSpec }}
              </template>
            </el-table-column> -->

        <!-- 物料编号 -->
        <el-table-column prop="goodsCode" show-overflow-tooltip label="物料编号" />

        <!-- 物料名称 -->
        <el-table-column prop="goodsName" show-overflow-tooltip label="物料名称" />

        <!-- 规格 -->
        <el-table-column prop="goodsSpec" show-overflow-tooltip label="规格" />

        <!-- 数量 -->
        <el-table-column prop="qty" show-overflow-tooltip label="数量" width="60" />

        <!-- 购买时间 -->
        <el-table-column prop="buyTime" show-overflow-tooltip label="购买时间" width="128" />

        <!-- 质保到期 -->
        <el-table-column prop="endTime" show-overflow-tooltip label="质保到期" width="128" />

        <!-- 条码图 -->
        <el-table-column label="条码图" width="80">
          <template #default="{ row }">
            <h-image
              :src="row.snCodeImage"
              :width="60"
              :height="37.5"
              :show-del-btn="false"
              :padding="2"
            ></h-image>
          </template>
        </el-table-column>

        <!-- 故障图片 -->
        <el-table-column label="故障图片" width="80">
          <template #default="{ row }">
            <h-image
              :src="row.fuselageImage"
              :width="60"
              :height="37.5"
              :show-del-btn="false"
              :padding="2"
            ></h-image>
          </template>
        </el-table-column>

        <!-- 登记信息 -->
        <el-table-column prop="address" show-overflow-tooltip label="登记信息" min-width="140">
          <template #default="scope">
            {{ scope.row.userName }}&nbsp;{{ scope.row.userPhone }}&nbsp;
            <span v-if="scope.row.province">{{
              scope.row.province +
              scope.row.city +
              scope.row.area +
              scope.row.town +
              scope.row.address
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-form :model="checkForm" class="modal_form_content" inline-message label-position="top">
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="checkForm.remark"
          type="textarea"
          maxlength="100"
          placeholder="请输入备注"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <h-button is-modal type="primary" @click="onAgree">通过</h-button>
      <h-plain-button is-modal type="error" @click="onUnAgree">驳回</h-plain-button>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss">
  :deep(.el-textarea) {
    .el-textarea__inner {
      height: 100px;
    }
  }

  .good-list {
    width: 1300px;
    margin-bottom: 12px;
  }

  .modal_form_content {
    padding: 0;
  }

  :deep(.el-tooltip__trigger) {
    font-weight: bold;
  }
</style>
